<template>
   <div>
     <el-input
         placeholder="添加职位"
         suffix-icon="el-icon-plus"
         v-model="pos.name"
          size="small"
          class="addJob"
         @keydown.enter.native="addPosition"
          >
     </el-input>
     <el-button  size="small" icon="el-icon-plus" type="primary" @click="addPosition">添加</el-button>
     <el-table
         :data="tableData"
         style="width: 100%"
         @selection-change="handleSelectionChange">
       <el-table-column
           type="selection"
           width="55">
       </el-table-column>
       <el-table-column
           prop="id"
           label="编号"
           width="180">
       </el-table-column>
       <el-table-column
           prop="name"
           label="职位"
           width="180">
       </el-table-column>
       <el-table-column
           prop="createDate"
           label="创建时间"
           width="180"  >
       </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button
               size="mini"
               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
           <el-button
               size="mini"
               type="danger"
               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
<!--     批量删除-->
     <el-button size="small" type="danger" style="margin-top: 10px" :disabled="this.multipleSelection.length==0"
      @click="handleDeletes">批量删除</el-button>
<!--     更新数据-->
     <el-dialog
         title="编辑职位"
         :visible.sync="dialogVisible"
         width="30%"
       >
      <div>
        <el-tag>职位</el-tag>
        <el-input v-model="updataPos.name" size="small"></el-input>
      </div>
       <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="doUpdata" size="small">确 定</el-button>
  </span>
     </el-dialog>
   </div>
</template>

<script>
import axios from "axios";

export default {
  name: "PosMana",
  data(){
    return{
      pos:{
        name:'',
      },
      multipleSelection:[],
      tableData: [],
      dialogVisible:false,
      updataPos:{
        name:'',
      }
    }
  },
  methods:{
    handleSelectionChange(val){
     this.multipleSelection = val;
    },
    //更新数据
    doUpdata(){
      axios({
        method:'put',
        url:'/api/system/basic/pos/',
        data:this.updataPos
      }).then(res=>{
        if(res){
          this.initPos();
          this.updataPos.name = '';
          this.dialogVisible = false;

        }

      })
    },
    //添加数据
    addPosition(){
      if(this.pos.name){
        axios({
          method:'post',
          url:'/api/system/basic/pos/',
          data:this.pos
        }).then(res=>{
          if(res){
            //更新数据
           this.initPos();
           this.pos.name = '';
          }
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          });
        })
      } else {
        this.$message({
          showClose: true,
          message: '错了哦，职位不能为空,',
          type: 'error'
        });
      }
    },
    handleEdit(index,data){
      Object.assign(this.updataPos,data);
      this.updataPos.createDate = '';
      //打开编辑框
     this.dialogVisible = true
    },
    handleDeletes(){
      this.$confirm('此操作将永久删除'+this.multipleSelection.length +'条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         let ids = '?';
         this.multipleSelection.forEach(item=>{
           ids+= 'ids='+item.id + '&'
         })
        //删除选中行
        axios({
          method:'delete',
          url:`/api/system/basic/pos/`+ids,
        }).then(res=>{
          if(res){
            this.initPos()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });



    },
    handleDelete(index,data){
        this.$confirm('此操作将永久删除'+[data.name], '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(data.id)
          //删除该行
          axios({
            method:'delete',
            url:`/api/system/basic/pos/${data.id}`,
          }).then(res=>{
            if(res){
              this.initPos()
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

    },
    initPos(){
      axios({
        method:'get',
        url:'/api/system/basic/pos/'
      }).then(res=>{
        if (res){
          this.tableData = res.data
        }
      })
    }
  },
  mounted() {
  this.initPos();
  }
}
</script>

<style scoped>
.addJob {
  width:300px;
  margin-right: 20px;
}
</style>